import './v-calendar.css';
import tpl from './tpl/index.pug'
import style from './v-calendar.css.json'
import Utils from '../../utils/index'
import $ from '../../utils/calendar'

interface Option {
  el?: string,
  type?: string,
  value?: string,
  direction?: string,
  min?: string,
  max?: string,
  startOnWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6
}
class VCalendar extends Utils {
  public data: any;
  public current: Date
  public opt: Option = {
    el: '',
    type: 'month',
    value: '',
    direction: 'horizontal',
    min: '2021/1/18',
    max: '2021/12/24',
    startOnWeek: 0
  }
  constructor (option) {
    super()
    this.opt = Object.assign(this.opt, option)
    this.current = this.opt.value ? new Date(this.opt.value) : new Date()
    this.generateData()
    this.render()
  }
  public render () {
    const {opt} = this
    const html = tpl({
      style,
      opt
    })
    console.log(html)
  }
  public generateData () {
    const {type, min, max, direction, startOnWeek} = this.opt
    const {current} = this
    const option = {
      current,
      min,
      max,
      direction,
      startOnWeek
    }
    switch (type) {
      case 'month' :
        this.data = $.getMonthDays(option)
        break;
      case 'week' :
        this.data = $.getWeekDays(option)
        break
    }
    console.log(this.data)
  }
}

export default class {
  constructor (option:Option) {
    return new VCalendar(option)
  }
}